<template>
	<view>
		<!-- 背景图 -->
		<view class="back">
		</view>
		<!-- 头部 -->
		<view class="header">
			<uni-icons type="back" color="white" size="20" @click="fanhui"></uni-icons>
			<text>论坛</text>
			<uni-icons type="person" color="white" size="20"></uni-icons>
		</view>
		<!-- 搜索--选地区 -->
		<view class="header1">
			<my-search :content='content' />
			<view class="area">
				<!-- 选择地区 -->
				<wangding-pickerAddress @change='change'>{{txt}}</wangding-pickerAddress>
			</view>
		</view>
		<!-- 图片 -->
		<image src="http://rsoya41a8.hn-bkt.clouddn.com/1.png?e=1680780881&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:4dtEI2WrBgHiRfP3cYcZJRkomo0=" mode="" class="bigImg"></image>
		<view>

		</view>
		<!-- 全部|精华 -->
		<view class="title-name">
			<text :class="{active:ischecked}" class="all" @click="ischecked=1">精选</text>
			<text :class="{active:!ischecked}" class="prime" @click="ischecked=0">关注</text>
		</view>

		<!-- 轮播图 -->
		<view class="mySwiper">
			<swiper :autoplay="false" :next-margin='90'>
				<swiper-item>
					<view class="swiper-item">
						<view class="item-item">
							<image src="http://rsoya41a8.hn-bkt.clouddn.com/yuesao3.jpg?e=1680781348&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:BoLgLJuKHKQQECUssfhPw2yqpIE=" mode=""></image>
							<view class="item-right">
								<text>#母婴常识</text>
								<text>干货太多，实用收藏</text>
								<text>2376人已参与</text>
							</view>
							<text class="zhiding">置顶</text>
						</view>
						<view class="item-item">
							<image src="http://rsoya41a8.hn-bkt.clouddn.com/yuesao4.jpg?e=1680781028&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:IpaSO7pyUC6ljVYtSn6r7OiE9XQ=" mode=""></image>
							<view class="item-right">
								<text>#怀孕初体验</text>
								<text>刚怀孕是什么感觉?来分享一下吧~</text>
								<text>2376人已参与</text>
							</view>
						</view>
						<view class="item-bottom">
							<text>剩余35个热门话题</text>
							<text style="padding-left: 80px;">查看更多></text>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="item-item">
							<image src="http://rsoya41a8.hn-bkt.clouddn.com/%E6%9C%88%E5%AB%822.png?e=1680781445&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:SBg6GJyWzkKGeocPrHliqopWjz4=" mode=""></image>
							<view class="item-right">
								<text>#母婴常识</text>
								<text>干货太多，实用收藏</text>
								<text>2376人已参与</text>
							</view>
						</view>
						<view class="item-item">
							<image src="http://rsoya41a8.hn-bkt.clouddn.com/yuesao4.jpg?e=1680781028&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:IpaSO7pyUC6ljVYtSn6r7OiE9XQ=" mode=""></image>
							<view class="item-right">
								<text>#怀孕初体验</text>
								<text>刚怀孕是什么感觉?来分享一下吧~</text>
								<text>2376人已参与</text>
							</view>
						</view>
						<view class="item-bottom">
							<text>剩余35个热门话题</text>
							<text style="padding-left: 80px;">查看更多></text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 发布动态 -->
		<view class="dongtai">
			<uni-icons type="compose" size="25"></uni-icons>
			<text>发布动态</text>
			<uni-icons type="right" size="20" style="position: absolute;top: 8rpx;right: 10px;"></uni-icons>
		</view>

		<!-- 内容 -->
		<view class="content">
			<view class="content-item" url="../knowledge/knowledge" id=0 @click="toKnowledge">
				<view class="word">
					<text class="title"><text class="zhiding">置顶</text>二十六个母婴常识！（干货太多，实用收藏）</text>
					<text class="describe">备孕须知最适合怀孕的季节：产科专家认为。。。。。</text>
					<text class="time">2022-11-20</text>
				</view>
				<view class="pic">
					<image
						src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EFAOKGXJUMRIoosrBeJs3QHaFO?pid=ImgDet&rs=1"
						mode=""></image>
				</view>
			</view>
			<view class="content-item" url="../knowledge/knowledge" id=0 @click="toKnowledge">
				<view class="word">
					<text class="title">【母婴知识】最全母婴护理知识</text>
					<text class="describe">史上最全的母婴护理基本常识都在这里了。。。。。。。</text>
					<text class="time">2022-12-01</text>
				</view>
				<view class="pic">
					<image
						src="http://rsoya41a8.hn-bkt.clouddn.com/Snipaste_2023-04-07_22-38-47.png?e=1680878804&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:uMGErNQaQYHuIOYZBoWZw1_Eei4="
						mode=""></image>
				</view>
			</view>
			<view class="content-item" url="../knowledge/knowledge" id=2 @click="toKnowledge">
				<view class="word">
					<text class="title">怀孕初体验————早孕期</text>
					<text class="describe">前言：刚刚怀孕是什么感觉？在我得知自己怀孕后。。。。</text>
					<text class="time">2022-12-23</text>
				</view>
				<view class="pic">
					<image
						src="https://pic1.zhimg.com/v2-74c971fc3558bf747894c31e9c574b2e_b.jpg"
						mode=""></image>
				</view>
			</view>
			<view class="content-item" url="../knowledge/knowledge" id=2 @click="toKnowledge">
				<view class="word">
					<text class="title">宝妈分享————怀孕期间小知识</text>
					<text class="describe">怀孕期间，不少孕妇的皮肤都会变得粗糙。。。。。。</text>
					<text class="time">2022-12-25</text>
				</view>
				<view class="pic">
					<image
						src="https://tse1-mm.cn.bing.net/th/id/OIP-C.n5MYq3DixjBIM7PDIO5hqQAAAA?w=222&h=174&c=7&r=0&o=5&dpr=1.7&pid=1.7"
						mode=""></image>
				</view>
			</view>
			<view class="content-item" url="../knowledge/knowledge" id=1 @click="toKnowledge">
				<view class="word">
					<text class="title">妈妈写给宝宝的孕期日记</text>
					<text class="describe">亲爱的宝宝，今天是怀上你的第一个星期天。。。。</text>
					<text class="time">2022-11-20</text>
				</view>
				<view class="pic">
					<image
						src="https://ts1.cn.mm.bing.net/th/id/R-C.e6ddeb3ee40e229f4804155a952549bb?rik=I0voO9Pv6tlBbw&riu=http%3a%2f%2fimg02.taobaocdn.com%2fimgextra%2fi2%2f11778168%2fT2.nOZXjVaXXXXXXXX_!!11778168.jpg&ehk=qd9ytqX6vqkwKwxIDfgQFr8IW99Z6IQ4zu0HC9kv8aQ%3d&risl=&pid=ImgRaw&r=0"
						mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import knowledgeVue from '../knowledge/knowledge.vue';
	export default {
		data() {
			return {
				ischecked: true,
				baseUrl: 'http://127.0.0.1:8080/image/',
				txt: '广州市',
				content: '请输入关键词',
			};
		},
		methods: {
			fanhui(){
				uni.navigateBack()
			},
			change(data) {
				this.txt = data.data[2]
			},
			toKnowledge(e){
				const {id}=e.currentTarget
				uni.navigateTo({
					url:`/subpkg1/knowledge/knowledge?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		width: 100%;
		height: 320px;
		z-index: -1;
		border-radius: 0 0 20px 20px;
		background: linear-gradient(#f08988, #ff8583);
		position: relative;
	}

	.header {
		height: 30px;
		margin-top: -270px;
		width: 90%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		position: relative;
		display: flex;
		justify-content: space-between;

		text {
			line-height: 30px;
			color: white;
		}

		uni-icons {
			// position: absolute;
			// top: 2px;
			// right: 13%;
			line-height: 30px;
		}
	}

	.bigImg {
		display: block;
		width: 80%;
		height: 150px;
		margin: 18px auto;
	}

	.header1 {
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 10px 10px 0 -5px;
		margin-top: 15px;

		.area {
			text-align: center;
			line-height: 38px;
			color: white;
		}
	}

	.title-name {
		display: flex;
		font-size: 13px;
		color: #cccccc;
		width: 90%;
		margin: 38px auto 5px;
		height: 38px;

		text {
			line-height: 30px;
		}

		.prime {
			margin-left: 20px;
		}

		.active {
			font-size: 18px;
			font-weight: bold;
			color: black;
			border-bottom: 4px solid #f98785;
		}
	}

	// 轮播图
	.mySwiper {
		width: 100%;
		height: 180px;
		margin: 20px 0 20px 20px;
		display: flex;
		flex-direction: column;

		swiper {
			height: 250px;
		}

		.swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			overflow: visible;

			.item-item {
				width: 100%;
				height: 50%;
				display: flex;
				margin-bottom: 8px;

				.zhiding {
					background-color: #f2cc51;
					color: white;
					width: 35px;
					height: 20px;
					font-size: 12px;
					text-align: center;
					line-height: 20px;
					margin: 0 auto;
					border-radius: 5px;
				}

				image {
					width: 23%;
					height: 100%;
					border: 1px solid transparent;
					border-radius: 5px;
				}

				.item-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 8px;

					text:nth-child(1) {
						font-size: 17px;
					}

					text:nth-child(2) {
						font-size: 13px;
						color: #8f8f8f;
					}

					text:nth-child(3) {
						font-size: 12px;
						color: #cccccc;
					}
				}
			}

			.item-bottom {
				color: #aaaaaa;
				font-size: 13px;
			}
		}

	}

	.dongtai {
		width: 90%;
		height: 30px;
		margin-left: 20px;
		margin-bottom: 10px;
		position: relative;

		text {
			font-size: 16px;
			padding-left: 10px;
			text-align: center;
			position: absolute;
			top: 7.5rpx;
			left: 30px;
		}
	}

	.content {
		.content-item {
			padding-top: 10px;
			width: 100%;
			height: 110px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #cccccc;

			.word {
				position: relative;
				width: 60%;
				height: 100%;
				display: flex;
				flex-direction: column;
				padding-left: 8px;

				.title {
					font-size: 16px;

					.zhiding {
						color: #c00000;
						border: 1px solid #c00000;
						font-size: 15px;
						border-radius: 5px;
						margin: 0 5px;
						padding: 0 5px;
					}
				}

				.describe {
					display: inline-block;
					width: 100%;
					height: 25px !important;
					font-size: 14px;
					color: #aaaaaa;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-top: 15px;
				}

				.time {
					position: absolute;
					bottom: 5px;
					font-size: 12px;
					color: #cccccc;
					padding-top: 10px;
				}
			}

			.pic {
				width: 30%;

				image {
					width: 100px;
					height: 90px;
				}
			}
		}
	}
</style>
